<template>
  <div class="app-container" v-loading="isLoading">
		<el-row :gutter="13">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="container_box">
    		<div class="box_tit">
	        	 <h3>实时访客人数</h3>
	        </div>
	        <div class="box_c">
	        	<line-chart :chart-data="lineChartData"/>
	        	<p>今日访客：  <strong>{{todayVisitorNum}}</strong></p>
	        </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
	    	<div class="container_box">
		        <div class="box_c1">
	        		<i class="iconfont icon-wode"></i>
	        		<h3>访客数</h3>
	        		<h1>{{totalVisitorNum}}</h1>
	        		<p>昨日全天 <span>{{yesterdayVisitorNum}}</span></p>
		        </div>
	        </div>
	        <div class="container_box mt13">
		        <div class="box_c1">
	        		<i class="iconfont icon-liulan"></i>
	        		<h3>浏览量</h3>
	        		<h1>{{totalBrowseNum}}</h1>
	        		<p>昨日全天 <span>{{yesterdayBrowseNum}}</span></p>
		        </div>
	        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="6">
      	 	<div class="container_box">
		        <div class="box_c2">
	        		<i class="iconfont icon-quan"></i>
	        		<h3>今日预计收益￥</h3>
	        		<h1>0.00</h1>
	        		<p>敬请期待，收益即将到账</p>
		        </div>
        	</div>
      </el-col>
    </el-row>

    <div class="container_box mt13">
     	<div class="box_tit">
        	 <h3>搭建店铺</h3>
        	 <p>快速搭建店铺主页，轮播、分类、列表</p>
        </div>
        <div class="box_c3">
          <panel-group></panel-group>
        </div>

    </div>

  </div>
</template>

<script>
 import LineChart from './components/LineChart'
import PanelGroup from './components/PanelGroup'
import {statistics} from "../../../api";

 export default {
  name: 'DashboardAdmin',
  components: { PanelGroup, LineChart },
  data() {
    return {
      lineChartData: {
        expectedData: [],
        actualData: []
      },
      totalBrowseNum:0,//总浏览器 浏览数量
      yesterdayBrowseNum:0,//昨天浏览器 浏览数量
      totalVisitorNum:0,//总访客数
      yesterdayVisitorNum:0,//昨日访客数
      todayVisitorNum:0,//今日访客数
      isLoading:false,
    }
  },
  methods: {
    async initData() {
      this.isLoading = true;
      let resp = await statistics()
      console.log("index stat==>", resp)
      if(this.qUtil.validResp(resp)) {
        this.lineChartData.expectedData = resp.data.yesterdayVisitors || [];
        this.lineChartData.actualData = resp.data.todayVisitors || [];
        this.totalBrowseNum = resp.data.totalBrowseNum || 0;
        this.yesterdayBrowseNum = resp.data.yesterdayBrowseNum || 0;
        this.totalVisitorNum = resp.data.totalVisitorNum || 0;
        this.yesterdayVisitorNum = resp.data.yesterdayVisitorNum || 0;
        this.todayVisitorNum = resp.data.todayVisitorNum || 0;
      }
      this.isLoading = false;
    },
  },
  mounted(){
    this.initData()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.container_box{
		background: #fff;
		height: auto;
		overflow: hidden;
		border-radius:10px;
		padding:20px 30px 30px 30px;
		-webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    /* box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05); */
	}
	.container_box .box_tit{
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.container_box .box_tit h3{
	    font-size: 20px;
	    float: left;
	    color: #333;
	    border-left:3px #2BB89A solid;
	    padding-left:10px;
	    margin-right: 10px;
	}
	.container_box .box_tit p{
		color: #999;
		margin: 27px 0 0 0px;
		font-size: 14px;
	}
	.container_box .box_c{height:400px; overflow: hidden;}
	.container_box .box_c p{
		font-size: 16px;
		color: #999;
		text-align: right;
		margin:0 10px 0 0;
	}
	.container_box .box_c p strong{
		font-size:40px;
		color: #333;
	}
	.mt13{margin-top: 13px;}
	.container_box .box_c1{height: 200px; padding-left:10px; overflow: hidden;}
	.container_box .box_c1 i{
		float: right;
		display: block;
		text-align:center;
		width:60px;
		height: 60px;
		line-height: 60px;
		font-size: 30px;
		color: #fff;
		background: #d5d8d7;
		border-radius: 100%;
		margin-top: 20px;
	}
	.container_box .box_c1 h3{
		font-size: 16px;
		color: #333;
		font-weight: normal;
	}
	.container_box .box_c1 h1{
		font-size:60px;
		color: #333;
		margin: 0;
	}
	.container_box .box_c1 p{
		font-size: 16px;
		color: #999;
		margin-top: 50px;
	}
	.container_box .box_c1 p span{
		font-size: 20px;
		color: #333;
	}
	.container_box .box_c2{ text-align: center; height:463px; overflow: hidden;}
	.container_box .box_c2 i{
		display: block;
		text-align:center;
		width:60px;
		height: 60px;
		line-height: 60px;
		font-size: 30px;
		color: #fff;
		background: #d5d8d7;
		border-radius: 100%;
		margin:120px auto 30px auto;
	}
	.container_box .box_c2 h3{
		font-size: 16px;
		color: #333;
		font-weight: normal;
	}
	.container_box .box_c2 h1{
		font-size:60px;
		color: #333;
		margin: 0;
	}
	.container_box .box_c2 p{
		font-size: 16px;
		color: #34bb9e;
		margin-top:100px;
	}
	.container_box .box_c3{ text-align: center; height:auto; overflow: hidden; min-height:200px;}
</style>
